<template>
  <div class="publicpageview">
    <div class="publicformview">
      <el-form :model="addQuery" class="demo-ruleForm" label-position="right" label-width="160px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="合同编号：" prop="contractno">
              <div style="display: flex;">
                <el-input v-model="addQuery.contractno"></el-input>
                <el-button style="margin-left: 5px;" size="mini" type="primary" @click="createcID">查询</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <div class="buttons">
                <el-button type="primary" @click="gotos" size="medium">返回</el-button>
                <el-button v-if="fid" type="primary" @click="gotodaying" size="medium">打印</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="业务编号：" prop="fcode">
              <el-input disabled v-model="addQuery.fcode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="承租人：" prop="owner">
              <el-input disabled v-model="addQuery.owner"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="承租人身份证号：" prop="idcard1">
              <el-input disabled v-model="addQuery.idcard1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋地址：" prop="addr">
              <el-input disabled v-model="addQuery.addr"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产别：" prop="realway">
              <el-input disabled v-model="addQuery.realway"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="间数：" prop="roomcount">
              <el-input disabled v-model="addQuery.roomcount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="间号：" prop="roomno">
              <el-input disabled v-model="addQuery.roomno"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计租面积独用：" prop="singlearea">
              <el-input disabled v-model="addQuery.singlearea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计租面积伙用：" prop="mixarea">
              <el-input disabled v-model="addQuery.mixarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table v-loading="listLoading" :data="searchList" border fit highlight-current-row size="mini"
                style="margin-top: 20px;">
        <el-table-column align="center" label="分户" type="index">
        </el-table-column>

        <el-table-column align="center" label="申请人">
          <template slot-scope="scope">
            <el-input v-model="scope.row.renter"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" label="申请人身份证号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.idCard"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" label="独用">
          <template slot-scope="scope">
            <el-input v-model="scope.row.singleUseArea"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" label="伙用">
          <template slot-scope="scope">
            <el-input v-model="scope.row.shareArea"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" label="间数">
          <template slot-scope="scope">
            <el-input v-model="scope.row.roomCount"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" label="间号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.roomNo"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="addFenhu">添加并户</el-button>
            <el-button type="text" size="mini" @click="delFenhu(scope.row.index)">删除并户</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-form :model="addQuery" disabled
               style="margin-top: 30px;">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="提交材料是否齐全：" prop="material" label-width="280px">
              <el-switch v-model="addQuery.material" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否有房屋使用权争议：" prop="disagree" label-width="280px">
              <el-switch v-model="addQuery.disagree" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否拖欠住房租金：" prop="owe" label-width="280px">
              <el-switch v-model="addQuery.owe" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋是否转租：" prop="contract" label-width="280px">
              <el-switch v-model="addQuery.contract" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否拆改住房结构和违章建筑：" prop="destroy" label-width="280px">
              <el-switch v-model="addQuery.destroy" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人是否有本市常住居民户口：" prop="city" label-width="280px">
              <el-switch v-model="addQuery.city" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否由成套独用住房变为成套伙用住房：" prop="change" label-width="280px">
              <el-switch v-model="addQuery.change" active-value="是" inactive-value="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="memo" label-width="140px">
              <el-input v-model="addQuery.memo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文件名称：" prop="floorcount" label-width="140px">
              <div  style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">文件上传
              </div>
              <div v-else style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">查看文件</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="contentAll">
        <div class="goufangContent">
          <el-form style="width: 340px;" :model="jinbanQuery" :disabled="!loginfzarea.includes(3)" ref="dataForm" class="demo-ruleForm"
                   label-position="right" label-width="100px">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="经办人意见：" prop="fgzcheckview">
                  <div style="display: flex;">
                    <el-input v-model="jinbanQuery.fgzcheckview"></el-input>
                    <div style="width: 100px;margin-left: 20px;">(签章)</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="经办人：" prop="fgzcheck">
                  <el-input v-model="jinbanQuery.fgzcheck"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="经办时间：" prop="fgzcheckdate">
                  <el-date-picker v-model="jinbanQuery.fgzcheckdate" type="date" placeholder="年/月/日">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="goufangContent">
          <el-form :model="fangguanQuery"  :disabled="!loginfzarea.includes(2)" ref="dataForm" class="demo-ruleForm" label-position="right"
                   label-width="200px" style="width: 450px;">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="管理部（分中心）负责人意见：" prop="fgzmanagerview">
                  <div style="display: flex;">
                    <el-select v-model="fangguanQuery.fgzmanagerview">
                      <el-option label="同意" value="同意" key="00"></el-option>
                    </el-select>
                    <div style="width: 100px;margin-left: 20px;">(签章)</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="负责人：" prop="fgzmanager">
                  <el-input v-model="fangguanQuery.fgzmanager"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="经办时间：" prop="fgzmanagerdate">
                  <el-date-picker v-model="fangguanQuery.fgzmanagerdate" type="date" placeholder="年/月/日">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <img class="imgs" :src="addQuery.imghousestation" alt="" />
        </div>
        <div class="goufangContent">
          <el-form style="width: 340px;" :model="fuheQuery" :disabled="!loginfzarea.includes(1)" ref="dataForm"
                   class="demo-ruleForm" label-position="right" label-width="100px">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="核查意见：" prop="qgsview">
                  <div style="display: flex;">
                    <el-select v-model="fuheQuery.qgsview">
                      <el-option label="同意" value="同意" key="00"></el-option>
                      <el-option label="不同意" value="不同意" key="40"></el-option>
                    </el-select>
                    <div style="width: 100px;margin-left: 20px;">(签章)</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="核查人：" prop="qgscheck">
                  <el-input v-model="fuheQuery.qgscheck"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="核查时间：" prop="qgsdate">
                  <el-date-picker v-model="fuheQuery.qgsdate" type="date" placeholder="年/月/日">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <img class="imgs" :src="addQuery.imgcompany" alt="" />
        </div>
        <div class="goufangContent">
          <el-form style="width: 340px;" :model="shenheQuery" :disabled="!loginfzarea.includes(1)" ref="dataForm"
                   class="demo-ruleForm" label-position="right" label-width="100px">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="抽查意见：" prop="zgsview">
                  <div style="display: flex;">
                    <el-select v-model="shenheQuery.zgsview">
                      <el-option label="同意" value="同意" key="00"></el-option>
                      <el-option label="不同意" value="不同意" key="40"></el-option>
                    </el-select>
                    <div style="width: 100px;margin-left: 20px;">(签章)</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="抽查人：" prop="zgscheck">
                  <el-input v-model="shenheQuery.zgscheck"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="抽查时间：" prop="zgsdate">
                  <el-date-picker v-model="shenheQuery.zgsdate" type="date" placeholder="年/月/日">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <img class="imgs" :src="addQuery.imgparentcompany" alt="" />
        </div>

      </div>

      <div class="saveContent">
        <el-button  type="primary" @click="save" size="medium">保 存</el-button>
      </div>

    </div>

    <!-- 扫描件上传组件 -->
    <managementFileUpload :visible.sync='uploadDialogVisible' :ImgUpload='fileList' @close='uploadClose' @confirm='uploadConfirm' />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  addSplittingFamily,
  splittingFamilySubmit,
  splittingFamilyData,
  updSplittingFamily,
  delSplittingFamilySubmit,
  getRent
} from '@/api/management'
import managementFileUpload from '@/components/managementFileUpload.vue';
import {queryisAction, queryloginfzarea} from "@/api/workflow/jfFlowable";
import {addflowOrderLog} from "@/api/workflow/FlowOrderLog";
import Cookies from "js-cookie";
export default {
  name: "AccommodationManagementChanquanzhengjian",
  components: {
    managementFileUpload
  },
  data() {
    return {
      addQuery: {

        owner: '',
        idcard1: '',
        addr: '',
        realway: '',
        roomcount: '',
        roomno: '',
        singlearea: '',
        mixarea: '',
        fcode:'',

        material: '否',
        disagree: '否',
        owe: '否',
        contract: '否',
        destroy: '否',
        city: '否',
        change: '否',
        contractno: '',
        memo: '',
        imgupload: '',
        renterId:''
      },
      searchQuery: {
        renter: '',
        idCard: '',
        singleUseArea: '',
        shareArea: '',
        roomCount: '',
        roomNo: ''
      },
      searchList: [],
      rules: {
      },
      fuheQuery: {
        qgsview: '',
        qgscheck: '',
        qgsdate: ''
      },
      shenheQuery: {
        zgsdate: '',
        zgsview: '',
        zgscheck: ''
      },
      fangguanQuery: {
        fgzmanagerview: '',
        fgzmanager: '',
        fgzmanagerdate: ''
      },
      jinbanQuery:{
        fgzcheckview:'',
        fgzcheckdate:'',
        fgzcheck:''
      },
      newAddQuery: {},
      list: [],
      listLoading: false,
      dialogVisible: false,
      addQueryle: false,
      shenheName: '经营管理意见',
      type: '',
      uploadDialogVisible: false,
      dialogName: '',
      shenheVisible: false,
      fid: '',
      isSearch: false,
      uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
      fileList:[],
      loginfzarea:[],//可以操作的区域
    };
  },

  computed: {

  },
  created() {

    queryloginfzarea(1).then(res=>{
      this.loginfzarea=res.data
    })
  },
  mounted() {
    console.log(this.$route.query.dialogName)
    this.dialogName = this.$route.query.dialogName
    this.fid = this.$route.query.fid
    this.newAddQuery = JSON.stringify(this.addQuery)

    this.splittingFamilyData()
    this.addFenhu()
    this.addFenhu()
  },

  methods: {
    createcID() {
      if (this.addQuery.contractno) {
        let data = {
          cid: this.addQuery.contractno
        }
        getRent(data).then(res => {
          console.log(res)
          this.addQuery.owner = res.data.renter
          this.addQuery.addr = res.data.address
          this.addQuery.idcard1 = res.data.renteridno
          this.addQuery.realway = res.data.ownway
          this.addQuery.roomcount = res.data.roomcount
          this.addQuery.roomno = res.data.roomno
          this.addQuery.singlearea = res.data.singleusearea
          this.addQuery.mixarea = res.data.sharearea
          this.addQuery.renterId = res.data.renterid
        })
      } else {
        this.$message({
          type: 'success',
          message: '请输入合同号!'
        })
      }
    },
    addFenhu() {
      let newQuery = JSON.stringify(this.searchQuery)
      this.searchList.push(JSON.parse(newQuery))
      this.searchList.forEach((item,index)=>{
        item.index = index
      })
      console.log(this.searchList)
    },
    delFenhu(index){
      console.log(index)
      if(this.searchList.length>2){
        this.searchList.splice(index,1)
        this.searchList.forEach((item,index)=>{
          item.index = index
        })
        console.log(this.searchList)
      }else{
        this.$message({
          type: 'success',
          message: '最少保留两个分户!'
        });
      }

    },
    gotos(){
      this.$router.go(-1)
    },
    gotodaying(){
      this.$router.push({
        path: 'fenhudengjilurudaying',
        query: {
          fid: this.fid
        }
      })
    },
    // 保存
    save() {
      // this.$refs.addForm.validate((valid) => {
      // 	if (valid) {
      // 		if (this.dialogName == '分户登记') {
      // 			this.addSplittingFamily()
      // 		} else if (this.dialogName == '分户修改' || this.dialogName == '总公司审核分户' || this.dialogName == '区公司复核分户') {
      // 			this.updSplittingFamily()
      // 		}
      // 	} else {
      // 		console.log('验证失败！');
      // 		return false;
      // 	}
      // });
      console.log(this.dialogName)
      this.updSplittingFamily()
    },
    // 登记
    addSplittingFamily() {
      let data = this.addQuery
      data.fenhuApplyList = this.searchList
      this.listLoading = true;
      addSplittingFamily(data).then(res => {
        this.listLoading = false;
        this.shenheVisible = false
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      })
    },
    // 修改
    updSplittingFamily() {
      let data
      data = this.addQuery
      if (this.dialogName == '分户修改') {
      } else if (this.loginfzarea.includes(1)) {
        data = this.shenheQuery
        if(data.zgsview=='同意'){
          data.state = 40
        }else{
          data.state = -2
        }
        if (data.zgsdate) {
          data.zgsdate = dayjs(data.zgsdate).format('YYYY-MM-DD HH:mm:ss')
        }
      } else if (this.loginfzarea.includes(2)) {
        data = this.fuheQuery
        if(data.qgsview=='同意'){
          data.state = 50
        }else{
          data.state =-1
        }
        if (data.qgsdate) {
          data.qgsdate = dayjs(data.qgsdate).format('YYYY-MM-DD HH:mm:ss')
        }
      } else if (this.loginfzarea.includes(3)) {
        data = this.fangguanQuery
        data.state = 20
        if (data.fgzmanagerdate) {
          data.fgzmanagerdate = dayjs(data.fgzmanagerdate).format('YYYY-MM-DD HH:mm:ss')
        }
      }
      data.fid = this.fid
      this.listLoading = true;
      updSplittingFamily(data).then(res => {
        console.log(res)
        this.listLoading = false;
        this.shenheVisible = false

        if(this.loginfzarea.includes(1)){
          addflowOrderLog({from:1,orderId:this.fid,orderCode:this.addQuery.contractno,shiUserId:Cookies.get("userId")}).then(re=>{
          })
        }
        if(this.loginfzarea.includes(2)){
          addflowOrderLog({from:1,orderId:this.fid,orderCode:this.addQuery.contractno,quUserId:Cookies.get("userId")}).then(re=>{

          })
        }
        if(this.loginfzarea.includes(3)){
          addflowOrderLog({from:1,orderId:this.fid,orderCode:this.addQuery.contractno,stationUserId:Cookies.get("userId")}).then(re=>{
          })
        }

        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      })
    },
    handleUpdate(currentData) {
      //   一定要在打开弹窗前 再赋值 不然resetFiles没用
      this.dialogVisible = true;
      this.$nextTick(() => {});
    },
    // 详情
    splittingFamilyData() {
      let data = {
        FID: this.fid
      }
      splittingFamilyData(data).then(res => {
        console.log(res)
        this.addQuery = res.data
        this.searchList = res.data.fenhuApplyList
        // this.addQuery.jizumianji = res.data.singlearea + res.data.mixarea
        this.fileList = JSON.parse(res.data.imgupload)

        this.jinbanQuery.fgzcheckview = res.data.fgzcheckview
        this.jinbanQuery.fgzcheckdate = res.data.fgzcheckdate
        this.jinbanQuery.fgzcheck = res.data.fgzcheck

        this.fuheQuery.qgsview = res.data.qgsview
        this.fuheQuery.qgscheck = res.data.qgscheck
        this.fuheQuery.qgsdate = res.data.qgsdate
        this.shenheQuery.zgsdate = res.data.zgsdate
        this.shenheQuery.zgsview = res.data.zgsview
        this.shenheQuery.zgscheck = res.data.zgscheck
        this.fangguanQuery.fgzmanager = res.data.fgzmanager
        this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
        this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
      })
    },
    // 重置
    rester() {
      this.addQuery = JSON.parse(this.newAddQuery)
    },
    handleDelete(fid) {
      this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          FID: fid
        }
        delSplittingFamilySubmit(data).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();

            this.rester()
          })
          .catch(_ => {});
    },
    // 扫描件上传
    handleUploadScan() {
      this.uploadDialogVisible = true;
    },
    uploadClose() {
      this.uploadDialogVisible = false
    },
    uploadConfirm(fileList) {
      this.addQuery.imgupload = JSON.stringify(fileList)
      this.uploadDialogVisible = false
      this.fileList = fileList
    }
  },
};
</script>
<style scoped>
.tianjiaButton {
  border: 2px solid #008C93;
  background-color: #fff;
  color: #008C93;
}

.xinxi {
  display: flex;
  width: 800px;
}

.contentAll {
  display: flex;
  align-items: center;
  background-color: #F7F7F7;
  flex-wrap: wrap;
}

.goufangContent {
  width: 50%;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #008C93;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.imgs {
  width: 170px;
  height: 170px;
}

.tabButton {
  background: #EFF2F7;
  color: #333333;
  border: none;
}

.saveContent {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-bottom: 20px;
}



/dee/.el-date-editor {
  width: 120px !important;
}

/deep/.el-input__inner {
  width: 160px;
}

/deep/.publicpaginationview .el-input__inner {
  width: 100px;
}

/deep/.publicpaginationview .is-in-pagination .el-input__inner {
  width: 50px;
}

.section-title {
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.buttons{
  display:flex;
}
</style>
